<template>
  <div class="app-container">
    <div class="article_manage_mp">
      <div class="main-nav-tabs">
        <ul class="nav">
          <li v-for="(item,index) in navItems" :key="index" @click="onActive(index,item[0])">
            <span class="nav-link" :class="{ active: currentIndex===index }"> {{ item[0]|navItem }}({{ item[1] }}) </span>
          </li>
        </ul>
      </div>
      <div class="main-search-box">
        <el-form ref="searchForm" :model="searchForm" :rules="rules" :inline="true" label-width="80px">
          <div>
            <el-form-item>
              <span>筛选：</span>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.year" size="small" style="width: 80px;margin-right: 8px" placeholder="不限">
                <el-option
                  v-for="item in years"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.month"
                size="small"
                style="width: 78px; margin-right: 32px;"
                placeholder="不限"
              >
                <el-option
                  v-for="item in months"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                v-model="searchForm.type"
                size="small"
                style="width: 110px;margin-right: 16px"
                placeholder="文章类型"
              >
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.column"
                size="small"
                style="width: 214px;margin-right: 32px;"
                placeholder="分类专栏"
              >
                <el-option
                  v-for="item in categories"
                  :key="item.id"
                  :label="item.categories"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="keywords">
              <el-input
                v-model="searchForm.keywords"
                placeholder="请输入关键词"
                style="width: 220px; margin-right: 24px;"
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" icon="el-icon-search" size="small" @click="handleSearch()">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="reset-condition" @click="resetForm('searchForm')" type="text">重置搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="article_manage_list">
        <div>
          <div class="article-list-item-mp" v-for="item in list" :key="item.hid">
            <div class="list-item-title">
              <span class="article-list-item-tag" v-if="item.top">置顶</span>
              <div class="list-item-top">
                <span />
              </div>
              <p class="article-list-item-txt">
                <a @click="handleEdit(item.hid)" title="编辑"> {{ item.title }}
                </a>
              </p>
            </div>
            <div class="article-list-item-info">
              <div class="item-info-left">
                <span> {{ item.type }} </span><span>{{ item.createTime |dateTimeFormat }}</span>
                <span class="article-list-item-readComment"><i class="el-icon-reading"> {{ item.read }}</i></span>
                <span class="article-list-item-readComment"><i class="el-icon-s-comment"> {{ item.reply }}</i> </span>
                <span class="article-list-item-readComment"><i class="el-icon-star-off"> 0 </i></span>
              </div>
              <div class="item-info-oper">
                <a @click="handleDetail(item.hid)">
                  <span class="item-info-oper-text">查看</span>
                </a>
                <div class="item-info-discuss">
                  <!--  <span class="item-info-oper-text">评论公开</span>-->
                </div>
                <div>
                  <span class="setTop item-info-oper-text" @click="handledTop(item.hid,item.top)" v-if="item.top===1">取消置顶</span>
                  <span class="setTop item-info-oper-text" @click="handledTop(item.hid,item.top)" v-else>置顶</span>
                </div>
                <div class="item-info-inline">
                  <div class="item-right-border">
                    <span class="del item-info-oper-text" @click="handleDelete(item.hid)">删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="el-pagination is-background">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.size"
          @pagination="fetchData()"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getList, recoverArticle, searchArticle, topArticle, countFiltrate } from '@/api/article'
import { getList as getColumnList } from '@/api/column'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  filters: {
    dateTimeFormat(date) {
      return parseTime(date, '{y}年{m}月{d}日 {h}:{i}:{s}')
    },
    navItem(name) {
      const navMap = {
        total: '全部',
        open: '公开',
        secret: '私密',
        draft: '草稿箱',
        recycle: '回收站'
      }
      return navMap[name]
    }
  },
  data() {
    return {
      navItems: [],
      isActive: '',
      currentIndex: 0,
      radio: 3,
      value: '',
      rules: {
        keywords: [
          { required: false, message: '请输入关键词', trigger: 'blur' },
          { min: 0, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      },
      searchForm: {
        keywords: '',
        year: '',
        month: '',
        type: '',
        column: '',
        status: '',
        page: 1,
        size: 10
      },
      years: [{ value: '2019', label: '2019' }, { value: '2020', label: '2020' }],
      months: [
        { value: '1', label: '1月' },
        { value: '2', label: '2月' },
        { value: '3', label: '3月' },
        { value: '4', label: '4月' },
        { value: '5', label: '5月' },
        { value: '6', label: '6月' },
        { value: '7', label: '7月' },
        { value: '8', label: '8月' },
        { value: '9', label: '9月' },
        { value: '10', label: '10月' },
        { value: '11', label: '11月' },
        { value: '12', label: '12月' }
      ],
      types: [{ value: '原创', label: '原创' }, { value: '转载', label: '转载' }],
      categories: [],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        size: 10,
        status: 'total'
      }
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    Pagination
  },
  methods: {
    fetchData() {
      getList(this.listQuery).then(response => {
        if (response.code === 20000) {
          this.total = response.payload.total
          this.list = response.payload.list
        }
      })
      getColumnList().then(response => {
        if (response.code === 20000) {
          this.categories = response.payload.list
        }
      })
      countFiltrate().then(response => {
        if (response.code === 20000) {
          this.navItems = Object.entries(response.payload)
        }
      })
    },
    handleSearch() {
      this.$refs['searchForm'].validate((valid) => {
        if (valid) {
          searchArticle(this.searchForm).then(response => {
            if (response.code === 20000) {
              this.total = response.payload.total
              this.list = response.payload.list
            }
          })
        }
      })
    },
    handleEdit(id) {
      this.$router.push({ path: '/document/editor', params: { id: id }, query: { id: id }})
    },
    handleDetail(id) {
      this.$router.push({ path: '/document/console/article/' + id, params: { id: id }})
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recoverArticle(id).then(response => {
          if (response.code === 20000) {
            this.$notify({
              title: 'Success',
              message: 'Delete Successfully',
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$notify({
          title: '取消',
          message: '已取消删除',
          type: 'info',
          duration: 2000
        })
      })
    },
    handleFiltrate() {
      this.handleSearch()
    },
    handledTop(id, istop) {
      this.$confirm('是否置顶该文章', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const top = istop === 1 ? 0 : 1
        topArticle({ id: id, top: top }).then(response => {
          if (response.code === 20000) {
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$notify({
          title: '取消',
          message: '已取消置顶',
          type: 'info',
          duration: 2000
        })
      })
    },
    onActive(index, filtrate) {
      this.currentIndex = index
      this.listQuery.status = filtrate
      getList(this.listQuery).then(response => {
        if (response.code === 20000) {
          this.total = response.payload.total
          this.list = response.payload.list
        }
      })
    },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields()
      this.searchForm = {
        keywords: '',
        year: '',
        month: '',
        type: '',
        column: '',
        status: '',
        page: 1,
        size: 10
      }
    }
  }
}
</script>
<style>
  .main-search-filtrate .el-form-item__content {
    width: 100%;
  }
</style>
<style lang="scss" scoped>
  .app-container {
    width: 100%;
    display: flex;

    .article_manage_mp {
      padding: 4px 24px 24px;
      text-align: start;
      flex: 1;

      .main-nav-tabs {
        position: relative;
        border-bottom: 1px solid #e9e9e9;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 30px;

        .nav {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          padding-left: 0;
          list-style: none;
          font-weight: 700;

          .nav-link {
            margin-right: 24px;
            font-size: .875rem;
            color: #999;
            padding-bottom: 10px;
            display: block;
            cursor: pointer;
          }

          .active {
            color: #4d4d4d;
            border-bottom: 2px solid #ca0c16;
            background-color: transparent;
            border-radius: 0;
          }

          ul li {
            padding: 0;
            margin: 0;
            list-style: none
          }
        }
      }

      /**
       search
       */
      .main-search-box {
        margin-top: 16px;
        padding: 16px;
        font-size: 14px;
        background-color: #f2f5f7;
        margin-left: auto;

        .el-form-item {
          margin-bottom: 0
        }

        .main-search-filtrate {
          display: flex;

          .el-form-item__content {
            line-height: 40px;
            position: relative;
            font-size: 14px;
            width: 100%;
          }

          .el-radio {
            color: #606266;
            font-weight: 500;
            line-height: 1;
            position: relative;
            cursor: pointer;
            display: inline-block;
            white-space: nowrap;
            outline: none;
            font-size: 14px;
            margin-right: 30px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
          }

          .reset-condition {
            float: right;
            margin-right: 87px;
            font-size: 14px;
            color: #79a5e5;
            cursor: pointer;
          }
        }

      }

      /**
      article_manage_list
       */

      .article_manage_list {
        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .article-list-item-mp {
          display: flex;
          -webkit-box-orient: vertical;
          -ms-flex-direction: column;
          flex-direction: column;
          border-bottom: 1px dotted #ddd;
          padding: 1rem 0 1rem 0;
          color: #999;
          font-size: 12px;

          .list-item-title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-direction: normal;
            -webkit-box-orient: horizontal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            align-items: baseline;

            .article-list-item-tag {
              font-size: 12px;
              padding: 0 8px;
              height: 24px;
              line-height: 24px;
              margin-right: 12px;
              white-space: nowrap;
              border: 1px solid #e9e9e9;
              flex-shrink: 0;
            }

            .list-item-top {
              margin-right: 9px;
            }

            .article-list-item-txt {
              font-size: 18px;
              color: #4d4d4d;
              margin-bottom: 0;
              -webkit-box-flex: 1;
              flex-grow: 1;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;

              a {
                font-size: 18px;
                color: #4d4d4d;
                -ms-flex-negative: 1;
                flex-shrink: 1;
                word-wrap: break-word;
                word-break: break-word;
              }
            }
          }

          .article-list-item-info {
            margin-top: 20px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .item-info-left {
              span {
                margin-right: 1.5rem;
              }

              .article-list-item-readComment img {
                width: 14px;
                height: 14px;
                vertical-align: -2px;
                margin-right: 3px;
              }
            }

            .item-info-oper {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-right: 87px;

              .item-info-discuss {
                display: inline-block;
                height: 16px;
              }

              .item-info-oper-text {
                color: #349edf;
                padding: 0 8px;
                border-right: 1px solid #e9e9e9;
                cursor: pointer
              }
            }
          }
        }
      }
    }
  }

</style>

